﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<!DOCTYPE html>
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/layui/layui.js"></script>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <main class="lyear-layout-content">

        <div class="demoTable">
            搜索ID：
            <div class="layui-inline">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
        <div>
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
</main>


    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
        <script>
            layui.use('table', function () {
                var table = layui.table;

                table.render({
                    elem: '#test',
                    url: '/AdminUser/GetList'
                     , request: {
                         pageName: 'pageIndex' //页码的参数名称，默认：page
                        , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                     },
                    autoSort: false
                  , toolbar: true
                  , title: '用户数据表'            
                  , cols: [[
                      { type: 'numbers', title: '序号' }
                     ,{ type: 'checkbox', width: 50 }
                    , { field: 'ID', title: 'ID', width: 80, unresize: true, sort: true }
                    , { field: 'UserName', title: '用户名', width: 120, edit: 'text' }
                    , { field: 'PhoneNumber', title: '邮箱', width: 150, edit: 'text' }
                    , { field: 'ticketcode', title: '积分', width: 100, sort: true, totalRow: true }
                    , { field: 'grades', title: '性别', width: 80, edit: 'text', sort: true }
                  , { fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo',title:'操作' }
                  ]]
                  , page: true
                  , response: {
                      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                  }
                  , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                      return {
                          "code": res.code, //解析接口状态
                          "msg": res.Count, //解析提示文本
                          "count": res.Count, //解析数据长度
                          "data": res.dt //解析数据列表
                      };
                  }
                });



                table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    console.log(obj.field); //当前排序的字段名
                    console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
                    console.log(this); //当前排序的 th 对象

                    //尽管我们的 table 自带排序功能，但并没有请求服务端。
                    //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
                    table.reload('test', {
                        initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                      , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                          field: obj.field //排序字段
                        , order: obj.type //排序方式
                      }
                    });

                    layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
                });
                var $ = layui.$, active = {
                    reload: function () {
                        var demoReload = $('#demoReload');

                        //执行重载
                        table.reload('test', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                          , where:
                              {
                                  keyword: demoReload.val()
                          }
                        }, 'data');
                    }
                };

                $('.demoTable .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            });
        </script>
</body>

</html>
